<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>4.天气案例_深度监视_简写</title>
    <script src="../js/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <h2>天气很 {{weather}} </h2>
        <button @click="isHot = !isHot">切换天气</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    isHot: true,
                }
            },
            methods: {
                addNum() {
                    this.numbers.a++;
                }
            },
            computed: {
                weather() {
                    return this.isHot ? '炎热' : '凉爽';
                }
            },
            watch: {
                //  正常写法
                /* isHot: {
                    // 当属性 isHot 发生了改变，处理 handler 的调用
                    handler(newValue, oldValue) {
                        console.log('isHot 发生了变化', newValue, oldValue);
                    }
                }, */

                //  简写
                /* isHot(newValue, oldValue) {
                    console.log('isHot 发生了变化', newValue, oldValue);
                } */

            }
        });

        // 正常写法
        /* vm.$watch('isHot', {
            immediate: true,
            deep: true,
            // 当属性 isHot 发生了改变，处理 handler 的调用
            handler(newValue, oldValue) {
                console.log('isHot 发生了变化', newValue, oldValue);
            }
        }); */
        //  简写
        vm.$watch('isHot', function (newValue, oldValue) {
            console.log('isHot 发生了变化', newValue, oldValue);
        });
    </script>

</body>

</html>